<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>导航菜单下划线跟随鼠标3</title>
		<style type="text/css">
			body {
  font-family: "Titillium Web", sans-serif;
  background: #3050F0;
  color: white;
  letter-spacing: 0.2em;
}

.menu {
  margin: 40vh auto 0;
  padding: 0;
  list-style-type: none;
  width: 75%;
  max-width: 960px;
  min-width: 320px;
  font-size: calc(.75em + .75vw);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.menu a {
  display: block;
  color: inherit;
  text-decoration: none;
  text-align: center;
}
.menu.has-magic-line .active a {
  border-bottom: none;
}
.menu .menu-item {
  width: auto !important;
  display: inline-block !important;
  margin-right: 1em;
}
.menu .menu-item a {
  padding-bottom: 0.25em;
  border-bottom: 0.125em solid transparent;
}
.menu .menu-item.active a, .menu .menu-item:hover a {
  border-bottom-color: white;
}

.magic-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.125em;
  background-color: white;
  width: 1px !important;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  will-change: transform;
}
.no-csstransitions .magic-line, .no-csstransforms .magic-line {
  display: none;
}

		</style>
	</head>
	<body>
		<nav id='nav'>
  <ul class='menu'>
    <li class='menu-item active'>
      <a href='home.html'>Home</a>
    </li>
    <li class='menu-item'>
      <a href='gallery.html'>Photo gallery</a>
    </li>
    <li class='menu-item'>
      <a href='about.html'>About</a>
    </li>
    <li class='menu-item'>
      <a href='blog.html'>Blog</a>
    </li>
    <li class='menu-item'>
      <a href='contact.html'>Contact</a>
    </li>
  </ul>
</nav>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	(function () {
    var magicLine, bind = function (fn, me) {
            return function () {
                return fn.apply(me, arguments);
            };
        };
    magicLine = function () {
        function magicLine(menu) {
            this.menu = menu;
            this.update = bind(this.update, this);
            if (!this.menu.length) {
                return;
            }
            $('<li>', { 'class': 'magic-line' }).appendTo(this.menu.addClass('has-magic-line'));
            this.update();
            $(window).resize(this.update);
        }
        magicLine.prototype.update = function () {
            var el, leftPos, ratio;
            el = this.menu.find('.active');
            if (el.length) {
                leftPos = el.position().left;
                ratio = el.width();
            } else {
                leftPos = ratio = 0;
            }
            return this.menu.find('.magic-line').css({ transform: 'translateX( ' + leftPos + 'px ) scaleX( ' + ratio + ' )' });
        };
        return magicLine;
    }();
    window.magicLine = new magicLine($('.menu'));
    $('.menu-item').on('click', function (e) {
        e.preventDefault();
        $(this).addClass('active').siblings().removeClass('active');
        return window.magicLine.update();
    });
}.call(this));
</script>
	</body>
</html>
